<html>

<style>
    .con {
        position: relative;
        display: inline-block;
        height: 200px;
        width: 200px;
    }

    .percent-circle {
        position: absolute;
        height: 100%;
        background: #f00;
        overflow: hidden;
    }

    .percent-circle-right {
        right: 0;
        width: 100px;
        border-radius: 0 100px 100px 0/0 100px 100px 0;
    }

    .percent-circle-right .right-content {
        position: absolute;
        content: '';
        width: 100%;
        height: 100%;
        transform-origin: left center;
        transform: rotate(0deg);
        border-radius: 0 100px 100px 0/0 100px 100px 0;
        background: #bbb;
    }

    .percent-circle-left {
        width: 100px;
        border-radius: 100px 0 0 100px/100px 0 0 100px;
    }

    .percent-circle-left .left-content {
        position: absolute;
        content: '';
        width: 100%;
        height: 100%;
        transform-origin: right center;
        transform: rotate(0deg);
        border-radius: 100px 0 0 100px/100px 0 0 100px;
        background: #bbb;
    }

    .text-circle {
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 80%;
        width: 80%;
        left: 10%;
        top: 10%;
        border-radius: 100%;
        background: #000;
        color: #fff;
    }
</style>


<body>
<div class="con"> <!--红色背景-->
    <div class="percent-circle percent-circle-left"> <!--透明-->
        <div class="left-content"></div> <!--灰色背景 旋转-->
    </div>

    <div class="percent-circle percent-circle-right">
        <div class="right-content"></div>
    </div>

    <div class="text-circle">0%</div> <!--黑色背景 -->
</div>

</body>


<script>
    var leftContent = document.querySelector(".left-content");
    var rightContent = document.querySelector(".right-content");
    var textCircle = document.querySelector(".text-circle");

    //先是leftContent旋转角度从0增加到180度，
    //然后是rightContent旋转角度从0增加到180度
    //度数/360=百分比/100,  270°=3/4=75%
    var angle = 270;
    if (angle > 180) {
        rightContent.setAttribute('style', 'transform: rotate(' + (angle - 180) + 'deg)');
        leftContent.setAttribute('style', 'transform: rotate(' + 180 + 'deg)')
    } else {
        leftContent.setAttribute('style', 'transform: rotate(' + angle + 'deg)');
    }
    setPercent(angle);

    function setPercent(angle) {
        textCircle.innerHTML = parseInt(angle * 100 / 360) + '%';
    }
</script>
</html>